<template>
  <!-- 大触专访页面 -->
  <div class="talk">
    <div class="talk_item" v-for="item in Talklist" :key="item.id">
      <img class="banner" :src="'https://ss.lanqb.com/' + item.imgCover" />
      <div class="item_r">
        <h4>{{ item.title }}</h4>
        <div class="tx">
          <img :src="'https://ss.lanqb.com/' + item.profile.avatar" />
          <span>{{ item.profile.nickname }}</span>
        </div>
        <div class="r_b">
          <span><van-icon name="eye-o" />{{ item.flow_num_base + item.statistics.hits_num }}</span>
          <span
            ><van-icon name="chat-o" />{{ item.statistics.comment_num }}</span
          >
          <span
            ><van-icon name="good-job-o" />{{ item.statistics.like_num }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import PubSub from "pubsub-js";
export default {
  name: "TalkView",

  data() {
    return {
      Talklist: [],
    };
  },

  mounted() {},

  created() {
    this.$parent.isloading = true;
    request(
      "https://m.lanqb.com/api/daniu/interview?link=paging&type=interview&page=1"
    ).then(({ data }) => {
      this.Talklist = data;
    });
    this.$parent.isloading = false;
    PubSub.subscribe("load", (msg, data) => {
      this.Talklist = data;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.talk {
  width: 90vw;
  background-color: #f4f4f4;
  margin: 0 auto;
  margin-bottom: 60px;
  .talk_item {
    display: flex;
    background-color: white;
    border-radius: 5px;
    margin: 15px 0;
    .banner {
      width: 140px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      height: 105px;
    }
    .item_r {
      width: 185px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      h4 {
        margin-left: 5px;
        font-size: 16px;
        max-height: 38px;
        display: -webkit-box;
        -webkit-line-clamp: 2; //第几行
        -webkit-box-orient: vertical;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
      }
      .tx {
        display: flex;
        align-items: center;

        img {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          margin-left: 5px;
          margin-right: 10px;
        }
        span {
          font-size: 13px;
          font-family: PingFangSC-Regular, microsoft yahei, arial;
        }
      }
      .r_b {
        display: flex;
        justify-content: space-around;
      }
    }
  }
}
</style>
